<script lang="ts">
import { shallowRef } from "vue";
import DWTEditBar from "./components/DWTEditBar.vue";
import DWTScan from "./components/DWTScan.vue";
import DWTUploadAndSave from "./components/DWTUploadAndSave.vue";
import OutputMessage from "./components/OutputMessage.vue";
import { DwtUIOperations } from "./components/tools/dwtUIOperations";

const containerId = "dwtcontrolContainer";
const dwtUtil = shallowRef(new DwtUIOperations(containerId));

export default {
  components: {
    DWTEditBar,
    DWTScan,
    DWTUploadAndSave,
    OutputMessage
  },

  data() {
    return {
      containerId,
      dwtUtil
    };
  },
  mounted() {
    dwtUtil.value.onPageInit("");
  },

  beforeUnmount() {
    dwtUtil.value.destroy();
  }
};
</script>
<template>
  <div className="ds-dwt-content ds-dwt-center" class="card dwtboard">
    <div id="DWTcontainerTop">
      <DWTEditBar :dwtUtil="dwtUtil"></DWTEditBar>
      <div :id="containerId"></div>
    </div>
    <div id="ScanWrapper">
      <DWTScan :dwtUtil="dwtUtil"></DWTScan>
      <DWTUploadAndSave :dwtUtil="dwtUtil"></DWTUploadAndSave>
      <OutputMessage :dwtUtil="dwtUtil"></OutputMessage>
    </div>
  </div>
</template>

<style lang="scss">
/* stylelint-disable selector-id-pattern */
.dwtboard {
  display: flex;
  height: 100%;
  padding: 0;
  #DWTcontainerTop {
    display: flex;
    flex: 1;
    flex-direction: column;
    #divEdit {
      width: 99%;
      border: none;
    }
    #dwtcontrolContainer {
      flex: 1;
      width: 99%;
    }
  }
  #ScanWrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    .divType {
      // font-size: 14px;
      // height: 32px;
      padding-top: 0;
      line-height: 40px;
    }
    #divUpload,
    #tabCon {
      margin-top: 0 !important;
    }
    #tabCon {
      height: 203px;
      padding-top: 5px;
      margin-bottom: 0;
    }
    #DWTdivMsg {
      flex: 1;
    }
  }
}
</style>
